<template>
    <div>
        <el-tabs v-model="activeId" class="demo-tabs">
            <el-tab-pane v-for="(item, index) in categoryList" :label="item.name" :name="item.id">
                <template #label>
                    <span class="custom-tabs-label">
                        <span>{{ item.name }}&ensp;</span>
                        <el-icon v-show="item.id == activeId" @click="resetLoadData" style="cursor:default;"
                            class="eliconReset">
                            <Refresh />
                        </el-icon>
                    </span>
                </template>
                <el-table :data="tableList" border style="width: 100%" height="70vh">
                    <el-table-column prop="id" label="id" width="180">
                        <template #header>
                            id
                        </template>
                        <template #default="scope">
                            <el-link type="primary" @click="findLoadDataChildren(scope.row)">
                                {{ scope.row.id }}
                            </el-link>&ensp;
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="Name">
                        <template #header>
                            名称：
                            <el-input style="width: 30%;" v-model="searchName" size="small" placeholder="回车搜索"
                                @keyup.enter.native="searchLoadData" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column width="110" label="操作" fiexd>
                        <template #header>
                            <div style="display: flex;justify-content: space-between;">
                                <div>操作</div>
                                <el-button type="primary" size="small" @click="openCategorySaveDialog">新增</el-button>
                            </div>
                        </template>
                        <template #default="scope">
                            <el-link type="primary" @click="findCategoryDialog(scope.row)">编辑</el-link>&ensp;
                            <el-link type="danger">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 保存分类 -->
    <el-dialog v-model="categoryDialog" title="Warning" width="30%" align-center destroy-on-close draggable
        @close="closeCategoryDialog">
        <template #header>
            <span class="dialogTitle1">保存</span>
        </template>
        <el-form :inline-message="true" ref="categoryRef" :model="category" status-icon :rules="categoryRules"
            label-width="80px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name" inline-message="true">
                <el-input v-model="category.name" type="text" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="categoryDialog = false">取消</el-button>
                <el-button type="primary" @click="saveCategory">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { toRaw } from 'vue'
export default {
    data() {
        return {
            activeId: 0,
            pid: 0,
            categoryList: [],
            tableList: [],
            category: {},
            searchName: "",
            categoryDialog: false,
            categoryRules: {
                name: [{ required: true, message: "必填" }]
            },
            parentRow: null
        }
    },
    created() {
        this.loadDataDictory()
    },
    methods: {
        loadDataDictory() {
            this.$axios.get(`/dataDictionArt/getDataDictDetails/category`).then(({ data }) => {
                if (data.code == 0) {
                    this.categoryList = data.rows
                    this.activeId = this.categoryList[0].id || ""
                }
            })
        },
        resetLoadData() {
            this.parentRow = null
            this.pid = 0
            this.tableList = []
            this.loadData()
        },
        loadData() {
            this.$axios.get(`/category/list?belongType=${this.activeId}&pid=${this.pid}&name=${this.searchName}`).then(({ data }) => {
                if (data.code == 0) {
                    this.tableList = data.rows
                }
            })
        },
        findLoadDataChildren(row) {
            this.parentRow = row
            this.pid = row.id
            this.loadData()
        },
        findCategoryDialog(row) {
            console.log(row);
        },
        searchLoadData() {
            this.searchName = this.searchName.trim()
            this.loadData()
        },
        openCategorySaveDialog() {
            this.categoryDialog = true
        },
        saveCategory() {
            this.$refs.categoryRef.validate((validataor) => {
                if (validataor) {
                    this.category.belongType = this.activeId
                    if (this.parentRow) {
                        this.category.pid = this.parentRow.id
                        this.category.level = parseInt(this.parentRow.level) + 1
                        if (this.parentRow.pids) {
                            this.category.pids = this.parentRow.pids + "," + this.parentRow.id
                        } else {
                            this.category.pids = this.parentRow.id
                        }
                    } else {
                        this.category.level = 1
                    }
                    console.log(this.category);
                    this.$axios.post(`/category/save`, this.category).then(({ data }) => {
                        if (data.code == 0) {
                            this.loadData()
                            this.categoryDialog = false
                        }
                    })
                } else {

                }
            })
        },
        closeCategoryDialog() {
            this.$nextTick(() => {
                this.$refs.categoryRef.resetFields()
            })
        }
    },
    watch: {
        'activeId': {
            deep: true,
            handler(newv, oldv) {
                this.parentRow = null
                this.searchName = ""
                this.pid = 0
                this.tableList = []
                this.loadData()
            }
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-form-item {
    margin-bottom: 0px;
}

.eliconReset:hover {
    color: #4eadca8e;
}
</style>